<template>
  <el-dialog
    ref="refDlg"
    title="编辑进度"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="600px"
    @close="closeDialog"
  >
    <div>
      <el-form ref="refForm" label-width="120px" :rules="formRules" :model="formData" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="洽谈任务号:" prop="negotiationTaskCode">
              {{ detailData.negotiationTaskCode }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装修任务号:" prop="decorationTaskCode">
              {{ detailData.decorationTaskCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="洽谈进度:" prop="progress">
              <el-select
                v-model="formData.progress"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in progressOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门店编码:" prop="shopCode">
              {{ detailData.shopCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="门店名称:" prop="shopName">
              {{ detailData.shopName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="施工单位名称:">
              {{ detailData.unitName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="施工单位负责人:" prop="principal">
              {{ detailData.principal }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工单位负责电话:" prop="principalPhone">
              {{ detailData.principalPhone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注:" prop="negotiationTaskRemark">
              <el-input v-model="formData.negotiationTaskRemark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveEdit } from '@/api/negotiation'
import { getDictByPatchType } from '@/api/dataDict'

export default {
  name: 'Edit',
  components: { },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      saveLoading: false,
      progressOptions: [],
      formData: {
        id: '',
        negotiationTaskRemark: '',
        decorationDelegateDetailId: '',
        progress: ''
      },
      formRules: {
        progress: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },

  async  created() {
    const { id, negotiationTaskRemark, decorationDelegateDetailId } = this.detailData
    this.formData = { id, negotiationTaskRemark, decorationDelegateDetailId }
    this.$set(this.formData, 'progress', this.detailData.negotiationTaskProgress || '')
    const { NEGOTIATION_PROGRESS } = await getDictByPatchType(['NEGOTIATION_PROGRESS'])
    this.progressOptions = NEGOTIATION_PROGRESS
  },

  methods: {

    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },

    clearForm(done) {
      this.formData = { }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },

    // 提交表单处理
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          const data = new FormData()
          data.append('negotiationTaskRemark', this.formData.negotiationTaskRemark || '无')
          data.append('decorationDelegateDetailId', this.formData.decorationDelegateDetailId)
          data.append('progress', this.formData.progress)
          saveEdit(data).then(res => {
            if (res.success) {
              this.closeDialog()
              this.$message.success('操作成功')
              this.$emit('success')
            }
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
/deep/.el-dialog .el-dialog__body{
    max-height: 450px;
    overflow: auto;
}
// /deep/.el-dialog{
//   max-height: 700px;
//   overflow: auto;
// }
</style>
